<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<title>21001010615 魏思怡 虎牙直播</title>
    <link rel="stylesheet" href="./css/match.css">
	<link rel="stylesheet" href="./fonts/font_4283921_k7csj3k1y3/iconfont.css">
    <link rel="stylesheet" href="./swiper/swiper-bundle.css">
    <script src="./js/shequ.js"></script>
    <link rel="stylesheet" href="./css/common.css">
</head>
<style>

</style>
<body>
	<header id="top">
		<div>
            <ul>
                <li>
                    赛事
                </li>
            </ul>
		</div>
			<div>
                <span class="iconfont icon-sousuo1"></span>
			</div>
            <div>
                <span class="iconfont icon-icon_tianjia"></span>
			</div>
	</header>
	<nav class="snav">
	<div>
        <span class="iconfont icon-morentouxiang  "><p>用户</p></span>
        <span class="iconfont icon-touxiang  "><p>用户</p></span>
        <span class="iconfont icon-morentouxiang  "><p>用户</p></span>
        <span class="iconfont icon-touxiang  "><p>用户</p></span>
        <span class="iconfont icon-morentouxiang  "><p>用户</p></span>
    </div>
    </nav>

    <div class="main">
        <span class="zb">正在热播</span>
        <span class="ak">全部直播></span>
    </div>

        <div class="swiper S2">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="./images/1.jpg">
              </div>
              <div class="swiper-slide">
                <img src="./images/2.jpg">
              </div>
              <div class="swiper-slide">
                <img src="./images/3.jpg">
              </div>
              <div class="swiper-slide">
                <img src="./images/4.jpg">
              </div>
            </div>
            <script src="./swiper/swiper-bundle.js"></script>
                <script>
                    var swiper2 = new Swiper(".S2", {
                            slidesPerView: 1,
                            spaceBetween: 5,
                        });
                </script>
          </div>



          <div class="tc">
            <div class="all1">
                <li class="tx">
                    <div class="tou">
                        <a class="iconfont icon-morentouxiang" href="#">
                            <a class="yh" href="#">英雄联盟手游赛事</a>
                        </a>
                    </div>
            <div class="nr">
                <p>【Top5】EDG.0711人马回手掏击溃敌军</p>
                <img src="./images/9.jpg">
            </div>
            <div class="tb">
                <div class="txt1">
                    <a href="#"><span class="iconfont icon-pinglun">评论</span></a>
                </div>
                <div class="txt3">
                    <a href="#" class="shang"><span class="iconfont icon-dianzan"></span></a>
                    <div class="cs">2012</div>
                   
                </div>
                <div class="txt4">
                    <a href="#"><span class="iconfont icon-fenxiang">分享</span></a>
                </div>
                <div class="txt5">x</div>
            </div>
            </li>
        </div> 
    </div>
    <script src="./js/shequ.js"></script>


    <nav class="bnav"><!-- 下导航 -->
        <ul>
            <li >
                <div>
                    <a href="./index.html"><span class="iconfont icon-shouye"></span>
                        <p>首页</p></a>
                </div>
            </li>
            <li >
                <div>
                    <a href="./1.5.html"><span class="iconfont icon-dingyue1"></span>
                        <p>订阅</p></a>
                </div>
            </li>
            <li class="selected_1">
                <div>
                    <a href="./match.html"> <span class="iconfont icon-saishi"></span>
                        <p>赛事</p></a>
                </div>
            </li>
            <li >
                <div>
                    <a href="./benefit.html"><span class="iconfont icon-fuli"></span>
                        <p>福利</p></a>
                </div>
            </li>
            <li >
                <div>
                    <a href="./my.html"><span class="iconfont icon-wode"></span>
                        <p>我的</p></a>
                </div>
            </li>
        </ul>
    </nav>
    
    
    
    
    <script src="./js/match.js"></script>

    <script>
    var tabs = document.querySelectorAll("body")
    for (let i = 0; i < tabs.length; i++) {
    tab(tabs[i]);
    }
    
    function tab(main) {
    var li = main.querySelectorAll(".top li");
    var box = main.querySelectorAll(".box");
    for (let i = 0; i < li.length; i++) {
        li[i].onclick = () => {
            for (let j = 0; j < li.length; j++) {
                li[j].classList.remove("selected")
                box[j].classList.add("none");
            }
            li[i].classList.add("selected");
            box[i].classList.remove("none");
        }
    }
    }</script>

          

</body>

</html>